﻿<div class="ui-widget-content">
    <h3>Button</h3>
    <p>
        Transforma elementos HTML em componentes button (botões).
        Os elementos HTML podem ser "button", "input" (submit ou button, checkbox, radio) e "a".
        Fazer isso é simples:
        <span class="codigo">$("#meu_botao").button();</span>
    </p>

    <p>
        <div>
            button: <button id="meu_botao1">Botão 1</button>
            <span class="codigo">&lt;button id="meu_botao1"&gt;Botão 1&lt;/button&gt;</span>
        </div><br/>
        <div>
            input type="submit": <input type="submit" id="meu_botao2" value="Botão 2" />
            <span class="codigo">&lt;input type="submit" id="meu_botao2" value="Botão 2" /&gt;</span>
        </div><br/>
        <div>
            anchor: <a href="#" id="meu_botao3">Link</a>
            <span class="codigo">&lt;a href="#" id="meu_botao3"&gt;Link&lt;/a&gt;</span>
        </div>
    </p><br/>

    <p>
        checkbox: 
        <span id="meu_botao4">
            <input type="checkbox" id="meu_botao4_option1" name="meu_botao4" checked="checked"/><label for="meu_botao4_option1">Opção 1</label>
            <input type="checkbox" id="meu_botao4_option2" name="meu_botao4"/><label for="meu_botao4_option2">Opção 2</label>
            <input type="checkbox" id="meu_botao4_option3" name="meu_botao4"/><label for="meu_botao4_option3">Opção 3</label>
        </span>
    </p><br/>

    <p>
        radio: 
        <span id="meu_botao5">
            <input type="radio" id="meu_botao5_option1" name="meu_botao4" checked="checked"/><label for="meu_botao5_option1">Opção 1</label>
            <input type="radio" id="meu_botao5_option2" name="meu_botao4"/><label for="meu_botao5_option2">Opção 2</label>
            <input type="radio" id="meu_botao5_option3" name="meu_botao4"/><label for="meu_botao5_option3">Opção 3</label>
        </span>
    </p><br/>

    <p>
        Botão com ícone: <button id="meu_botao6">Botão com Ícone</button>
        <div><span class="codigo">$("#meu_botao6").button({ icons: { primary: "ui-icon-locked", secondary: "ui-icon-gear" } });</span></div>
    </p><br/>

    <script type="text/javascript">
        inicializador.buttonInit = function() {
            $("#meu_botao1, #meu_botao2, #meu_botao3, #meu_botao4, #meu_botao5").button();
            $("#meu_botao4, #meu_botao5").buttonset();
            
            $("#meu_botao6").button({ icons: { primary: "ui-icon-locked", secondary: "ui-icon-gear" } });
        };
    </script>
</div>
